<template>
  <div class="i_bg bg_color">
    <div class="i_ban_bg">
      <!--Begin Banner Begin-->
      <div
        class="banner"
        @mouseenter="stopAutoPlay"
        @mouseleave="startAutoPlay"
      >
        <button class="nav-btn prev" @click.stop="prevSlide">‹</button>
        <div
          class="slides"
          :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
        >
          <div v-for="(slide, index) in banners" :key="index" class="slide">
            <img :src="slide.image" :alt="slide.title" />
          </div>
        </div>
        <button class="nav-btn next" @click.stop="nextSlide">›</button>
        <div class="dots">
          <span
            v-for="(dot, index) in banners"
            :key="index"
            @click="goToSlide(index)"
            :class="{ active: currentIndex === index }"
          ></span>
        </div>
      </div>

      <!--End Banner End-->
      <div class="inews">
        <div class="news_t">
          <span class="fr"
            ><a href="" @click.prevent="toNewsList()">更多 ></a></span
          >新闻资讯
        </div>
        <ul>
          <li v-for="(news, index) in newsList" :key="index">
            <span>【新资讯】</span>
            <a href="#" @click.prevent="toNewsDetil(news.id)">{{
              news.title
            }}</a>
          </li>
        </ul>
        <div class="charge_t">
          话费充值
          <div class="ch_t_icon"></div>
        </div>
        <form>
          <table
            style="width: 205px; margin-top: 10px"
            cellspacing="0"
            cellpadding="0"
          >
            <tr height="35">
              <td width="33">号码</td>
              <td><input type="text" value="" class="c_ipt" /></td>
            </tr>
            <tr height="35">
              <td>面值</td>
              <td>
                <select class="jj" name="city">
                  <option value="0" selected="selected">100元</option>
                  <option value="1">50元</option>
                  <option value="2">30元</option>
                  <option value="3">20元</option>
                  <option value="4">10元</option>
                </select>
                <span style="color: #ff4e00; font-size: 14px">￥99.5</span>
              </td>
            </tr>
            <tr height="35">
              <td colspan="2">
                <input type="submit" value="立即充值" class="c_btn" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <!-- 楼层商品 begin -->
    <floor-products-vue></floor-products-vue>
    <!-- 楼层商品 end -->
  </div>
</template>

<script>

import FloorProductsVue from "@/components/FloorProducts.vue";
import { mapMutations } from "vuex";
import axios from "axios";

//添加注示
export default {
  name: "IndexView",
  components: {

    FloorProductsVue,
  },
  data() {
    return {
      currentIndex: 0,
      interval: null,
      newsList: [],
      banners: [],
    };
  },
  methods: {
    ...mapMutations(["setShowPage"]),
    toNewsList() {
      this.setShowPage(2);
      this.$router.push({
        name: "newsList",
      });
    },
    async fetchNewsData() {
      this.isLoading = true;
      try {
        const response = await axios.get("/api/news/getAllNews", {
          params: {
            pageNum: 1,
            pageSize: 5,
          },
        });
        this.newsList = response.data.pageInfo.list || [];
      } catch (error) {
        console.error("获取新闻数据失败:", error);
      } finally {
        this.isLoading = false;
      }
    },
    toNewsDetil(id) {
      this.$router.push(`/NewsDetil/${id}`);
    },
    startAutoPlay() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.banners.length;
      }, 3000);
    },
    stopAutoPlay() {
      clearInterval(this.interval);
    },
    goToSlide(index) {
      this.currentIndex = index;
    },
    async fetchBanners() {
      try {
        this.banners = [
          { image: require("@/assets/images/ban1.gif"), title: "Banner 1" },
          { image: require("@/assets/images/ban2.gif"), title: "Banner 2" },
          { image: require("@/assets/images/ban3.gif"), title: "Banner 3" },
          { image: require("@/assets/images/ban4.gif"), title: "Banner 4" },
        ];
      } catch (error) {
        console.error("加载轮播图失败:", error);
        this.banners = [];
      }
    },
    prevSlide() {
      this.currentIndex =
        (this.currentIndex - 1 + this.banners.length) % this.banners.length;
      this.restartAutoPlay();
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.banners.length;
      this.restartAutoPlay();
    },
    restartAutoPlay() {
      this.stopAutoPlay();
      this.startAutoPlay();
    },
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
  created() {
    this.fetchBanners();
    this.fetchNewsData();
  },
};
</script>

<style scoped>
.banner {
  width: 740px;
  height: 401px;
  position: relative;
  overflow: hidden; /* 关键样式 */
}

.slides {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}
.slide > img {
  width: 740px;
  height: 401px;
}

.slide {
  min-width: 100%;
  flex-shrink: 0;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.dots span.active {
  background: white;
}
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 80px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}
</style>